/**
 * Created by douxin on 23/09/2016.
 */

import React from 'react';
import echarts from 'echarts';
import ChinaJson from './China.json';
import { getAreaStatisticData } from './StatisticService';

class AreaStatisticMapChart extends React.Component {

    getOptions() {
        const data = getAreaStatisticData(this.props.trades).sort(function (a, b) {
            return b.value - a.value;
        });
        console.log('area map chart:', data);
        let options = {
            backgroundColor: 'transparent',
            textStyle: {
                color: '#9d9d9d'
            },
            tooltip : {
                trigger: 'item',
                formatter: (params) => {
                    return `${params.data.name}: ${params.data.value[2]}件`;
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x:'right',
                data:['订单所在城市 Top 10', '订单所在城市 Top 50', '订单所在城市'],
                textStyle: {
                    color: '#9d9d9d'
                }
            },
            toolbox: {
                show: true,
                orient: 'horizontal',
                top: 20,
                right: 20,
                iconStyle: {
                    normal: {
                        borderColor: '#fff'
                    }
                }
            },
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series : [
                {
                    name: '订单所在城市 Top 10',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: data.slice(0, 10),
                    symbolSize: 20,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#e3da48',
                            opacity: 0.8
                        }
                    },
                    zlevel: 3
                },
                {
                    name: '订单所在城市 Top 50',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: data.slice(10, 50),
                    symbolSize: 15,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#1da7db',
                            opacity: 0.8
                        }
                    },
                    zlevel: 2
                },
                {
                    name: '订单所在城市',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: data.slice(51, data.length-1),
                    symbolSize: 10,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0dca91',
                            opacity: 0.8
                        }
                    }
                }
            ]
        };

        // if (data.length > 0) {
        //     options['geo']['center'] = [data[0].value[0], data[0].value[1]];
        // }
        return options;
    }

    componentDidMount() {
        echarts.registerMap('china', ChinaJson);
        this.myChart = echarts.init(document.getElementById('area-statistic-map-chart'));
        this.myChart.setOption(this.getOptions());
    }

    componentDidUpdate() {
        console.log('AreaMapChart:', this.props.trades);
        this.myChart.setOption(this.getOptions());
    }

    render() {
        return (
            <div id="area-statistic-map-chart"></div>
        );
    }

}

AreaStatisticMapChart.propTypes = {
    trades: React.PropTypes.array
};

export default AreaStatisticMapChart;